// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

@import '../../../common/styles/colors.scss';
@import '../../../common/styles/common.scss';

.left-nav {
    overflow-y: auto;
    border-right: 1px solid $neutral-8;
    z-index: 100;
    background-color: $neutral-0;
    max-height: calc(100vh - (#{$details-view-header-bar-height}));
    height: calc(100vh - (#{$details-view-header-bar-height}));

    :global {
        .ms-Nav-groupContent {
            margin-bottom: 0;
        }

        .ms-Nav-link {
            height: fit-content;
            width: unset;
        }

        button {
            text-align: left;
        }

        button.ms-Nav-link {
            width: 100%;
        }

        .overview-label {
            padding-left: 10%;
            text-align: left;
            margin-top: 6px;
            margin-bottom: 6px;
            display: flex;
            flex-direction: column;
        }

        .overview-name {
            line-height: 20px;
        }

        .overview-percent {
            line-height: 16px;
            font-size: 12px;
        }

        .ms-Nav-navItems {
            margin-top: 0 !important;
        }

        .ms-Nav-compositeLink {
            a,
            button {
                border-top: 0;
                border-bottom: 0;
            }

            &.is-selected {
                .ms-Button-label {
                    color: $always-black;
                }

                a,
                button {
                    background-color: $communication-tint-40;

                    .ms-Button-label,
                    .overview-percent {
                        color: $highlighted-text;

                        @media (forced-colors: active) {
                            forced-color-adjust: none;
                            color: HighlightText !important;
                        }
                    }

                    .left-nav-icon {
                        color: $left-nav-icon;
                        @media (forced-colors: active) {
                            forced-color-adjust: none;
                            color: HighlightText !important;
                        }
                    }
                }

                a::after,
                button::after {
                    border-left: $pivot-item-left-border-width $pivot-item-border-style
                        $communication-primary;
                }
            }
        }

        .ms-Pivot-text {
            font-size: $font-size-s;
        }

        .ms-Pivot-icon {
            font-size: 9px;
        }
    }
}
